import React, { useRef,useState } from 'react';
import { DeleteOutlined, SearchOutlined,PaperClipOutlined ,InsertRowRightOutlined,ClusterOutlined,FileTextOutlined,EnvironmentOutlined,DashboardOutlined} from '@ant-design/icons';


import { Button,  DatePicker,Select ,Card, Col, Form,  Row,Image, Avatar, Skeleton } from 'antd';
import { GridContent } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
const { Option } = Select;
import StandardFormRow from '@/components/StandardFormRow';
import TagSelect from '@/components/TagSelect';
import styles from '../style.less'
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
import bg from '/public/home_bg.png';
const count = 3;





function onChange(pagination, filters, sorter, extra) {
  console.log('params', pagination, filters, sorter, extra);
}

const data=[

  {loading:false,name:'aa'}
]


export default () => {
  const [form] = Form.useForm();
  const actionRef = useRef<ActionType>();
     const [loading, setLoading] = useState(false);
     const [initLoading, setInitLoading] = useState(true);
     const [list, setList] = useState(data);
 
     const loadMore =
       !initLoading && !loading ? (
         <div
           style={{
             textAlign: 'center',
             marginTop: 12,
             height: 32,
             lineHeight: '32px',
           }}
         >
           <Button //onClick={this.onLoadMore}
           >loading more</Button>
         </div>
       ) : null;
  return (
    <GridContent className={styles.baojing}>
    <React.Fragment>
    <Card bordered={false}>
        <Form
          layout="inline"
          form={form}
          initialValues={{
            owner: ['wjh', 'zxx'],
          }}
          onValuesChange={() => {
            // dispatch({
            //   type: 'listAndsearchAndarticles/fetch',
            //   payload: {
            //     count: 8,
            //   },
            // });
          }}
        >
          <StandardFormRow title="隐患类型" grid style={{ paddingBottom: 11 }}>
          <Row gutter={[16,24]} justify="space-between">
            <Col >
              <FormItem name="category">
                <TagSelect expandable>
                  <TagSelect.Option value="cat1">未巡检</TagSelect.Option>
                  <TagSelect.Option value="cat2">正常</TagSelect.Option>
                  <TagSelect.Option value="cat3">上报缺陷</TagSelect.Option>
                
                </TagSelect>
              </FormItem>
              </Col>
              <Col >
                <Row>
                  <div  className={styles.searchlabel}>
                      低风险
                  </div>
                  <div  className={[styles.searchlabel, styles.zhongbg].join(' ')}>
                      中风险
                  </div>
                  <div  className={[styles.searchlabel, styles.gaobg].join(' ')}>
                      高风险
                  </div>
                </Row>
              </Col>
            </Row>
          </StandardFormRow>
          <StandardFormRow title="处理进程" grid style={{ paddingBottom: 11 }}>
            <FormItem name="category1">
              <TagSelect expandable>
                <TagSelect.Option value="cat1">未派发</TagSelect.Option>
                <TagSelect.Option value="cat2">已派发未处理</TagSelect.Option>
              </TagSelect>
            </FormItem>
          </StandardFormRow>
          <StandardFormRow title="其它选项" grid >
            <Row gutter={[16,24]} justify="space-between">
              <Col >
              <FormItem >
                <Row>
                <div  className={styles.inputBg} style={{marginRight:'15px'}} >
                <Select   placeholder="区域位置"  bordered={false}>
                  <Option value="">区域位置1</Option>
                </Select>
                </div>
                <div  className={styles.inputBg} style={{marginRight:'15px'}} >
                <Select placeholder="设备类型"   bordered={false}>
                  <Option value="">设备类型1</Option>
                </Select>
                </div>
                <div  className={styles.inputBg} >
                  <RangePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false}  />
                </div>
                </Row>
              </FormItem>
              </Col>
              <Col style={{textAlign: 'right'}}>
                <Button type="primary" icon={<SearchOutlined />}  style={{marginRight:'15px'}}  className={styles.searchBtnBg}>搜索</Button>
                <Button type="primary"  icon={<DeleteOutlined />} style={{marginRight:'15px'}}  className={styles.resetBtnBg}>重置</Button>
                <Button type="primary" icon={<PaperClipOutlined />}  className={styles.exportBtnBg}>导出</Button>
              </Col>
            </Row>
          </StandardFormRow>
        </Form>
      </Card>
      <div   style={{ margin: '0 24px'}}> 
        <div  className={styles.listblock} > 
          <Row className={styles.top}>
            <Col>
              <span className={styles.name}>深圳市阳间五金电子有限公司</span>
              <span className={styles.time}>2021-09-08 10:00 :00</span> 
            </Col>
            <Col>  <span  className={styles.shebeiStateBtn}>正常</span>    <Button size="small" type="primary"  icon={<FileTextOutlined />}  className={styles.primaryBtnBg}>详情</Button></Col></Row>  
          <Row>
            <Col>  
              <div   className={[styles.itemlabel, styles.gaobg].join(' ')} >
                高报警
              </div>
            </Col>
            <Col className={styles.right}>
              <Row>
               <p><DashboardOutlined /> 网关识别号：12454545454</p>
               <p><InsertRowRightOutlined /> 设备型号：ARCM300-Z-4G</p>
               <p><ClusterOutlined /> 仪表地址：1</p>
               <p><EnvironmentOutlined /> 区域位置：1栋4车间配电箱</p>
              </Row>
              <div>
               <p>详细描述：智慧用电 通道1 剩余电流 报警 2614</p>
              </div>
            </Col>
          </Row>  
        </div>
        <div  className={styles.listblock} > 
          <Row className={styles.top}>
            <Col>
              <span className={styles.name}>深圳市阳间五金电子有限公司</span>
              <span className={styles.time}>2021-09-08 10:00 :00</span> 
            </Col>
            <Col>  <span  className={styles.shebeiStateBtn}>正常</span>    <Button size="small" type="primary"  icon={<FileTextOutlined />}  className={styles.primaryBtnBg}>详情</Button></Col></Row>  
          <Row>
            <Col>  
                <div className={[styles.itemlabel, styles.zhongbg].join(' ')}  >中报警</div>
            </Col>
            <Col className={styles.right}>
              <Row>
               <p><DashboardOutlined /> 网关识别号：12454545454</p>
               <p><InsertRowRightOutlined /> 设备型号：ARCM300-Z-4G</p>
               <p><ClusterOutlined /> 仪表地址：1</p>
               <p><EnvironmentOutlined /> 区域位置：1栋4车间配电箱</p>
              </Row>
              <div>
               <p>详细描述：智慧用电 通道1 剩余电流 报警 2614</p>
              </div>
            </Col>
          </Row>  
        </div>
        <div  className={styles.listblock} > 
          <Row className={styles.top}>
            <Col>
              <span className={styles.name}>深圳市阳间五金电子有限公司</span>
              <span className={styles.time}>2021-09-08 10:00 :00</span> 
            </Col>
            <Col>  <span  className={styles.shebeiStateBtn}>正常</span>    <Button size="small" type="primary"  icon={<FileTextOutlined />}  className={styles.primaryBtnBg}>详情</Button></Col></Row>  
          <Row>
            <Col>  
           
              <div  className={styles.itemlabel}>
                  低报警
              </div>
            </Col>
            <Col className={styles.right} >
              <Row>
               <p><DashboardOutlined /> 网关识别号：12454545454</p>
               <p><InsertRowRightOutlined /> 设备型号：ARCM300-Z-4G</p>
               <p><ClusterOutlined /> 仪表地址：1</p>
               <p><EnvironmentOutlined /> 区域位置：1栋4车间配电箱</p>
              </Row>
              <div>
               <p>详细描述：智慧用电 通道1 剩余电流 报警 2614</p>
              </div>
            </Col>
          </Row>  
        </div>
      </div>
   
   
      </React.Fragment>
      </GridContent>
  );
};